// *******************************************************************************************************
// # ボタン・アイコン
// *******************************************************************************************************

// ボタン・アイコン
//
// #### export to common.css
// ※このページでは表示が完全に再現されず、部分的に崩れている場合があります。  
// ※class名やデザインの参考まで
//
// Styleguide 1.0

/* ------------------------------------
	* ボタン・アイコン
* ------------------------------------ */


// 画像ロールオーバー
//
// .mod_btn_over - sample
//
// Markup:
// <a href="#dummy" class="{$modifiers}"><img src="/area/images/result/nav_picture.png" alt="写真・間取り" width="218" height="58" /></a>
//
// Styleguide 1.1

/* --------------------------
	* mod_btn_over
* -------------------------- */
.mod_btn_over {
	@include inline-block;
	background-color: $bgColorMain;

	&:link, &:visited {
		@include opacity(1);
	}

	&:hover {
		@include opacity;
	}
}


// デバイステキストボタン：右と下にライン
//
// .mod_btn.mod_btn_blue - ブルー
// .mod_btn.mod_btn_green - グリーン
// .mod_btn.mod_btn_khaki - カーキ
// .mod_btn.mod_btn_blue.mod_btn_visited - 紫（物件詳細やショップ詳細等、visitedの処理が入るボタン）
// .mod_btn_s.mod_btn_blue - ブルー（低い高さ：36px）
//
// Markup:
// <a href="#dummy" class="{$modifiers}">詳細</a>
//
// Styleguide 1.2

/* --------------------------
	* mod_btn, mod_btn_s
* -------------------------- */
.mod_btn, .mod_btn_s {
	@extend %btnTextLine;
}

.mod_btn_s {
	padding-top: 6px;
	padding-bottom: 6px;
}

.mod_btn_visited {
	&:visited {
		border-color: $borderColorPurple;
		color: $textColorPurple;

		&:before {
			border-right-color : $btnBorderColorUsuPurple;
			border-bottom-color: $btnBorderColorUsuPurple;
		}
	}
}

.mod_btn_blue {
	border-color: $borderColorBlue;
	color       : $textColorBlue;

	&:before {
		border-right-color : $btnBorderColorUsuBlue;
		border-bottom-color: $btnBorderColorUsuBlue;
	}
}

.mod_btn_green {
	border-color: $borderColorGreen;
	color       : $textColorGreen !important;

	&:before {
		border-right-color : $btnBorderColorUsuGreen;
		border-bottom-color: $btnBorderColorUsuGreen;
	}
}

.mod_btn_khaki {
	border-color: $borderColorKhaki;
	color       : $textColorKhaki !important;

	&:before {
		border-right-color : $btnBorderColorUsuKhaki;
		border-bottom-color: $btnBorderColorUsuKhaki;
	}
}


// デバイステキストボタン（大）：右と下にライン
//
// .mod_btn_l.mod_btn_blue - ブルー
//
// Markup:
// <a href="#dummy" class="mod_btn_l mod_btn_blue">詳細</a>
//
// Styleguide 1.3


/* --------------------------
	* mod_btn_l
* -------------------------- */
.mod_btn_l {
	@extend %btnTextLine;
	padding-top: 16px;
	padding-bottom: 14px;
	width: 300px;
	font-size: 20px;
}


// デバイステキストボタン（大）：アイコン付き
//
// .mod_btn_l.mod_btn_blue.mod_btn_l_area - 地域・路線から探す
//
// Markup:
// <a href="#dummy" class="mod_btn_l mod_btn_blue mod_btn_l_area"><span>地域・路線から探す</span></a>
//
// Styleguide 1.4

.mod_btn_l_area {
	background: #fff url(/shared/images/icon/btn/icn_area.png) no-repeat 32px 5px;

	span {
		position: relative;
		left: 23px;
	}
}

.mod_btn_l_time {
	background: #fff url(/shared/images/icon/btn/icn_time.png) no-repeat 24px 10px;

	span {
		position: relative;
		left: 17px;
	}
}


// デバイステキストボタン（大）：ボタン中央寄せ
//
// .mod_btn_box_c - 地域・路線から探すと通勤通学時間から探す
//
// Markup:
// <div class="mod_btn_box_c">
// <p><a href="#dummy" class="mod_btn_l mod_btn_blue mod_btn_l_area"><span>地域・路線から探す</span></a></p>
// <p><a href="#dummy" class="mod_btn_l mod_btn_blue mod_btn_l_time"><span>通勤通学時間から探す</span></a></p>
// </div>
//
// Styleguide 1.5
.mod_btn_box_c {
	margin-top: 30px;
	font-size: 0px;
	text-align: center;

	p {
		margin: 0px 10px;
		@include inline-block;
	}
}


// デバイステキストボタン：立体型
//
// mod_btn_all.mod_btn_all_blue - ブルー
// mod_btn_all.mod_btn_all_pink - ピンク
// mod_btn_all.mod_btn_all_green - グリーン
// mod_btn_all.mod_btn_all_yellow - イエロー
// mod_btn_all_s.mod_btn_all_green - グリーン（低い高さ：36px）
// mod_btn_all_s.mod_btn_all_black - ブラック（低い高さ：36px）
//
// Markup:
// <a href="#dummy" class="{$modifiers}">詳細</a>
//
// Styleguide 1.6

/* --------------------------
	* mod_btn_all, mod_btn_all_s
* -------------------------- */
.mod_btn_all, .mod_btn_all_s {
	@extend %btnTextLineAll;
}

.mod_btn_all_s {
	padding-top: 5px;
	padding-bottom: 7px;
}

.mod_btn_all_blue {
	border-color    : $borderColorBlue;
	background-color: $bgColorBlue;

	&:before {
		border-top-color   : #295aa6;
		border-right-color : #002477;
		border-bottom-color: #002477;
		border-left-color  : #0c439b;
	}
}

.mod_btn_all_pink {
	border-color    : $borderColorPink;
	background-color: $bgColorPink;

	&:before {
		border-top-color   : #ff89cb;
		border-right-color : #e83f9d;
		border-bottom-color: #e83f9d;
		border-left-color  : #ff5ab7;
	}
}

.mod_btn_all_green {
	border-color    : $borderColorGreen;
	background-color: $bgColorGreen;

	&:before {
		border-top-color   : #7dcd48;
		border-right-color : #41a600;
		border-bottom-color: #41a600;
		border-left-color  : #50bb09;
	}
}

.mod_btn_all_yellow {
	border-color: $borderColorYellow;
	color: $textColor;
	background-color: $bgColorYellow;

	&:before {
		border-top-color   : #fadc61;
		border-right-color : #e7c024;
		border-bottom-color: #e7c024;
		border-left-color  : #f9d439;
	}
}

.mod_btn_all_black {
	border-color: $borderColorBlack;
	background-color: $bgColorBlack;

	&:before {
		border-top-color   : #7c7c7c;
		border-right-color : #2d2f2b;
		border-bottom-color: #2d2f2b;
		border-left-color  : #4e4e4e;
	}
}


// デバイステキストボタン：ページ下部（1行）
//
// .mod_btn_append - \#appendContainer内
//
// Markup:
// <p class="mod_btn_append">
// <span class="text">チェックのある物件を</span>
// <a href="javascript: void(0);" class="mod_btn_all mod_btn_all_green">まとめて問い合わせ</a>
// <span class="note">※1回に20件まで可能です。</span>
// </p>
//
// Styleguide 1.7

/* --------------------------
	* mod_btn_append
* -------------------------- */
.mod_btn_append {
	margin-top: 30px;
	text-align: center;

	.text, .note {
		@include inline-block;
		font-size: $fontSizeL;
		font-weight: bold;
	}

	.mod_btn_all {
		margin: 0px 12px;
		padding-top: 17px;
		padding-bottom: 17px;
		width: 364px;
		color: #fff;
		font-size: 20px;
	}

	.note {
		font-weight: normal;
	}
}


// デバイステキストボタン：ページ下部（2行）
//
// ※style属性はスタイルガイド上の表示調整用なので不要
//
// .mod_btn_append.mod_btn_append2 - \#appendContainer内
//
// Markup:
// <p class="mod_btn_append mod_btn_append2">
// <a href="javascript: void(0);" class="mod_btn_all mod_btn_all_green">選択した物件をまとめて問い合わせ</a>
// <span class="note" style="margin-bottom: 0;">※20件まで可能</span>
// </p>
//
// Styleguide 1.8

.mod_btn_append2 {
	.note {
		margin-top: 12px;
		margin-bottom: -30px;
		display: block;
		font-size: $fontSizeL;
	}
}

.mod_btn_append_search {
	padding-left: 38px;
	@include inline-block;
	position: relative;
	left: -9px;
	vertical-align: baseline;
	background: url(#{$imgPathCommon}icon/icn_btn_search.png) no-repeat 0px 0px;
	font-size: 20px;
}

.mod_btn_disabled {
	.mod_btn_append_search {
		padding-left: 0px;
		position: static;
		background: none;
	}
}


// デバイステキストボタン：disabled
//
// .mod_btn_disabled - 既存ボタンに .mod_btn_disabled 追加。タグはspan。
//
// Markup:
// <span class="mod_btn_all_s mod_btn_all_green mod_btn_disabled">問い合わせ</span>
//
// Styleguide 1.9

/* --------------------------
	* mod_btn_disabled
* -------------------------- */
.mod_btn_disabled {
	$c: #c6cad2;

	border-color: $c;
	color: $c !important;
	background-color: #eceff4;
	cursor: default;

	&:hover {
		@include opacity(1);
	}

	&:before {
		content: normal;
	}
}


// デバイステキストボタン：掲載終了
//
// .mod_btn_postend - 既存ボタンに .mod_btn_postend 追加。タグはspan。
//
// Markup:
// <span class="mod_btn_s mod_btn_blue mod_btn_postend">掲載終了</span>
//
// Styleguide 1.10

/* --------------------------
	* mod_btn_postend
* -------------------------- */
.mod_btn_postend {
	$c: #e12d4f;

	padding-top: 7px;
	padding-left: 32px;
	padding-bottom: 5px;
	border-color: $c;
	color: #fff;
	background-color: $c;
	background: $c url(/shared/images/icon/icn_btn_check.png) no-repeat 10px 50%;

	&:hover {
		@include opacity(1);
	}

	&:before {
		content: normal;
	}
}


// デバイステキストボタン：戻る
//
// .mod_btn_back.mod_btn_over - sample
//
// Markup:
// <a href="#dummy" class="mod_btn_back mod_btn_over">全国へ戻る</a>
//
// Styleguide 1.11

/* --------------------------
	* mod_btn_back
* -------------------------- */
.mod_btn_back {
	padding-top: 7px;
	padding-right: 15px;
	padding-bottom: 6px;
	padding-left: 30px;
	@include border-radius(24px);
	@include min-width(124px - 45);
	color: #fff !important;
	background-color: #494949;
	background-image: url(/shared/images/icon/arr_btn_back.png);
	background-repeat: no-repeat;
	background-position: 10px 6px;
	text-align: center;
	text-decoration: none;
}


// デバイステキストボタン：グレー背景青文字
//
// .mod_btn_gray - sample
//
// Markup:
// <a href="javascript: void(0);" class="mod_btn_gray">写真をもっとみる</a>
//
// Styleguide 1.12

/* --------------------------
	* mod_btn_gray
* -------------------------- */
.mod_btn_gray {
	@extend .mod_link_blue;
	padding: 10px 5px;
	@include border-radius($radiusBtn);
	@include inline-block;
	line-height: 1.3;
	color: $textColorBlue;
	background-color: $bgColorGray;
	font-size: $fontSizeL;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}


// スターアイコン
//
// .mod_icn_star - デフォルト
// .mod_icn_star_active - 追加済
//
// Markup:
// <a href="javascript: void(0);" class="{$modifiers}">お気に入りに追加</a>
//
// Styleguide 1.13

/* --------------------------
	* mod_icn_star
* -------------------------- */
.mod_icn_star {
	@extend %spriteStar;
	@include spriteStarBackground(s1_star);
}

.mod_icn_star_active {
	@extend %spriteStar;
	@include spriteStarBackground(s2_star);
}


// 〜アイコン
//
// .mod_icn_between - sample
//
// Markup:
// <span class="mod_icn_between">〜</span>
//
// Styleguide 1.14

/* --------------------------
	* mod_icn_between
* -------------------------- */
.mod_icn_between {
	@include inline-block;
	width: 40px;
	height: 44px;
	background: url(/shared/images/icon/icn_between.png) no-repeat 50% 50%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;

	@include hack(6) {
		height: auto;
		text-indent: -9999px;
	}
	@include hack(7) {
		height: auto;
		text-indent: -9999px;
	}
}


// キャンペーンアイコン
//
// .mod_icn_campaign - R8
//
// Markup:
// <img src="/shared/images/dummy/icn_campaign.jpg" alt="" width="50" height="50" class="mod_icn_campaign" />
//
// Styleguide 1.15

/* --------------------------
	* mod_icn_campaign
* -------------------------- */
.mod_icn_campaign {
	@include border-radius(8px);
}

